<template lang="">
  <div>
    <el-dialog
    v-model="currShow"
    :title="title"
    width="800px"
    :before-close="close"
    :close-on-click-modal="false"
    @open="open()"
  >
  <el-form :model="queryForm" v-loading="formLoading" :rules="rules" ref="queryRef" label-width="100px" class="demo-form-inline">
    <el-row>
      <el-col :span="12">
        <el-form-item label="课程编码" prop="cur_enCode">
          <el-input v-model.trim="queryForm.cur_enCode" maxlength="20" placeholder="请输入" clearable/>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="课程名称" prop="cur_name">
          <el-input v-model.trim="queryForm.cur_name" maxlength="20" placeholder="请输入" clearable />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="启用状态" prop="cur_statusCode">
          <el-radio-group v-model="queryForm.cur_statusCode" class="ml-4">
            <el-radio :label="1">启用</el-radio>
            <el-radio :label="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="课程价格" prop="cur_price">
          <el-input v-model="queryForm.cur_price" @input="validateNumber(queryForm, 'cur_price')" maxlength="20" placeholder="请输入" clearable />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="预收名额" prop="cur_number">
          <el-input v-model="queryForm.cur_number" @input="validateNumber(queryForm, 'cur_number')" maxlength="20" placeholder="请输入" clearable />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="课时" prop="cur_weeks">
          <el-input v-model="queryForm.cur_weeks" @input="validateNumber(queryForm, 'cur_weeks')" maxlength="20" placeholder="请输入" clearable />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="类型" prop="cur_type">
          <el-select v-model="queryForm.cur_type" class="m-2 w-full-select" placeholder="请选择" filterable clearable>
            <el-option label="大班" value="大班"/>
            <el-option label="中班" value="中班"/>
            <el-option label="小班" value="小班"/>
          </el-select>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="close(false)">取消</el-button>
        <el-button type="primary" @click="submit(queryRef)" :loading="submitLoading">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
  </div>
</template>
<script lang="ts">
import { insertCourse, updateCourse } from '@/api/teaching/course-manage'
import { defineProps, getCurrentInstance, nextTick } from 'vue';
import useCurrentInstance from "@/utils/useCurrentInstance";
import { defineComponent, reactive, ref, watch } from '@vue/runtime-core';
import { ElMessage } from 'element-plus';
export default defineComponent({
  props: {
    valueShow: {
      type: Boolean,
      default: false
    },
    editCurrInfo: {
      type: Object,
      default: () => { }
    }
  },
  setup(props, { emit }) {
    // 变量区域
    const { proxy } = useCurrentInstance()
    const currShow = ref(false)
    const formLoading = ref(false)
    const submitLoading = ref(false)
    const queryRef: any = ref(null)
    const queryForm: any = ref({
      cur_enCode: '',
      cur_name: '',
      cur_weeks: null,
      cur_type: null,
      cur_price: null,
      cur_number: null,
      cur_statusCode: 1,
      cur_statusName: '',
    })
    const rule = { required: true, message: '必填项', trigger: 'change' }
    const rules = {
      cur_enCode: [rule],
      cur_name: [rule],
      cur_price: [rule],
      cur_number: [rule],
      cur_weeks: [rule],
      cur_type: [rule]
    }
    const title = ref('新增课程')

    // 方法区域
    const open = () => {
      if (props.editCurrInfo) {
        queryForm.value = { ...props.editCurrInfo }
      }
    }

    const close = (val) => {
      emit('closeCurr', val)
      nextTick(() => {
        queryRef.value.resetFields()
      })
    }

    const submit = (formRef) => {
      formRef.validate(valid => {
        if (!valid) return
        const submitApi = props.editCurrInfo ? updateCourse : insertCourse
        queryForm.value.cur_statusName = queryForm.value.cur_statusCode ? '启用' : '禁用'
        formLoading.value = true
        submitLoading.value = true
        submitApi(queryForm.value).then((res: any) => {
          ElMessage.success(res.message)
          close(true)
        }).finally(() => {
          formLoading.value = false
          submitLoading.value = false
        })
      })
    }

    const validateNumber = (obj, val) => {
      // 用正则表达式检查输入是否合法
      const regex = /^\d*\.?\d{0,2}$/
      // 如果输入不合法，移除最后一位字符
      !regex.test(obj[val]) && (obj[val] = obj[val].slice(0, -1))
    }


    // 钩子函数区域
    watch(
      () => props.valueShow,
      (newVal, oldVal) => {
        currShow.value = newVal
      }
    )

    // 方法回调区域

    // return返回值
    return {
      currShow,
      formLoading,
      submitLoading,
      queryRef,
      queryForm,
      rules,
      title,
      open,
      close,
      submit,
      validateNumber
    }
  }
})
</script>
<style scoped lang="scss"></style>